<script src="/static/js/echarts.js"></script>
<div class="app">
    <div class="layui-row layui-col-space20" style="margin: 0px">
        <div class="layui-col-lg3">
            <div class="analyze">
                <h3><i class="fa fa-upload"></i> 累计上传</h3>
                <p><?php echo $num; ?>张</p>
            </div>
        </div>
        <div class="layui-col-lg3">
            <div class="analyze">
                <h3><i class="fa fa-user-plus"></i> 管理员累积上传</h3>
                <p><?php echo $admin; ?>张</p>
            </div>
        </div>
        <div class="layui-col-lg3">
            <div class="analyze">
                <h3><i class="fa fa-user-o"></i> 游客累积上传</h3>
                <p><?php echo $visitor; ?>张</p>
            </div>
        </div>
        <div class="layui-col-lg3">
            <div class="analyze">
                <h3><i class="fa fa-question"></i> 可疑图片</h3>
                <p><?php echo $dubious; ?>张</p>
            </div>
        </div>
        <div class="layui-col-lg3">
            <div class="analyze">
                <h3><i class="fa fa-calendar-check-o"></i> 本月上传</h3>
                <p><?php echo $month; ?>张</p>
            </div>
        </div>
        <div class="layui-col-lg3">
            <div class="analyze">
                <h3><i class="fa fa-calendar-plus-o"></i> 今日上传</h3>
                <p><?php echo $day; ?>张</p>
            </div>
        </div>
        <div class="layui-col-lg3">
            <div class="analyze">
                <h3><i class="fa fa-comments"></i> 社区支持</h3>
                <p><a href="https://dwz.ovh/imgurl2" target="_blank" title="ImgURL社区支持">https://ttt.sh/</a></p>
            </div>
        </div>
        <div class="layui-col-lg3">
            <div class="analyze">
                <h3><i class="fa fa-github"></i> 源码下载</h3>
                <p><a href="https://github.com/helloxz/imgurl" target="_blank">https://github.com/</a></p>
            </div>
        </div>
        <div class="layui-col-lg3">
            <div class="analyze">
                <h3><i class="fa fa-paypal"></i> 打赏支持</h3>
                <p><a href="https://dwz.ovh/imgurl" target="_blank">https://dwz.ovh/imgurl</a></p>
            </div>
        </div>
        <div class="layui-col-lg3">
            <div class="analyze">
                <h3><i class="fa fa-qq"></i> 技术支持（付费）</h3>
                <p>QQ:<a href="http://wpa.qq.com/msgrd?v=3&uin=337003006&site=qq&menu=yes" rel="nofollow"
                         target="_blank" title="联系作者，获得技术支持。">337003006</a></p>
            </div>
        </div>
        <div class="layui-col-lg3">
            <div class="analyze">
                <h3><i class="fa fa-qq"></i> QQ交流群</h3>
                <p>
                    <a href="//shang.qq.com/wpa/qunwpa?idkey=1994c352ea864ed09a00fd3cfb0f80c946850a70e98551736be69f4253f09136"
                       rel="nofollow" target="_blank" title="加入ImgURL交流群，和大家一起讨论。">341195621</a></p>
            </div>
        </div>
        <div class="layui-col-lg3">
            <div class="analyze">
                <h3><i class="fa fa-paypal"></i> 购买专业版</h3>
                <p><a href="https://dwz.ovh/9" rel="nofollow" target="_blank" title="ImgURL Pro专业版，功能更加强大。">https://dwz.ovh/9</a>
                </p>
            </div>
        </div>

    </div>

    <div id="database" style="width: calc(100% - 20px);margin-left: 10px;height: 400px"></div>
    <script>
        var data1 = JSON.parse('<?php echo $database; ?>');
        let days = [];
        let data = [];
        let yk_data = [];
        let gl_data = [];
        data1.forEach(el => {
            days.push(el.days);
            data.push(el.num);
            yk_data.push(el.yk_num);
            gl_data.push(el.num - el.yk_num);
        })
        let myChart = null;
        const initChart = () => {
            const chartDom = document.getElementById('database');
            myChart = echarts.init(chartDom);
            let option;
            option = {
                xAxis: {
                    type: 'category',
                    data: days
                },
                title: {
                    text: '图片日上传走势'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params, ticket, callback) {
                        str = `
                                <p>${params[0].axisValue}</p>
                                <span>总数量：${params[0].marker + params[0].data + '张'}<span><br/>
                                <span>游&nbsp;&nbsp;&nbsp;客：${params[1].marker + params[1].data + '张'}<span><br/>
                                <span>管理员：${params[2].marker + params[2].data + '张'}<span>
                        `
                        return str;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                yAxis: {
                    type: 'value',
                    max: Math.max(...data) + Math.max(...data) * 0.25
                },
                legend: {
                    data: ['总数量', '游客', '管理员']
                },
                series: [
                    {
                        data: data,
                        name: '总数量',
                        type: 'line',
                        color: '#ff5e57',
                        smooth: true
                    },
                    {
                        data: yk_data,
                        type: 'line',
                        name: '游客',
                        color: '#8d08e7',
                        smooth: true
                    },
                    {
                        data: gl_data,
                        type: 'line',
                        name: '管理员',
                        color: '#41a9fd',
                        smooth: true
                    }
                ]
            };

            option && myChart.setOption(option);
        }
        initChart();
        window.addEventListener('resize', function () {
            myChart.resize()
        });
    </script>
</div>

  
 